<script setup lang="ts">
import { ref } from 'vue';
import { buildAssetSource } from '@/utils';

const emit = defineEmits(['close']);

const show = ref(false);

const confirmSignIn = ref(false);

function handleConfirmSignIn() {
  confirmSignIn.value = true;
}

function handleClose() {
  show.value = false;
  emit('close');
}

defineExpose({
  onOpen() {
    confirmSignIn.value = false;
    show.value = true;
  },
  onClose() {
    handleClose();
  }
});
</script>

<template>
  <view v-show="show" class="popup-overlay">
    <view v-if="!confirmSignIn" class="app-popup">
      <view class="app-popup__hd">
        <view class="app-popup__title">
          检查检验签到
        </view>
        <view class="app-popup__desc">
          提前签到，检验检查更有序
        </view>
        <view class="app-popup__close" @click="handleClose">
          <image :src="buildAssetSource('login-close.png')" class="h-54 w-54" />
        </view>
      </view>
      <view class="app-popup__content">
        <!-- 患者信息 -->
        <view class="content-card">
          <view class="content-card__title">
            患者信息
          </view>
          <view class="card-cell__group">
            <view class="card-cell__item">
              <view class="card-cell__title">
                姓名
              </view>
              <view class="card-cell__content">
                陈可辛
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                年龄
              </view>
              <view class="card-cell__content">
                45岁
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                性别
              </view>
              <view class="card-cell__content">
                女
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                身份证号
              </view>
              <view class="card-cell__content">
                13800000000
              </view>
            </view>
          </view>
        </view>
        <!-- 就诊信息 -->
        <view class="content-card mt-20">
          <view class="content-card__title">
            检查检验信息
          </view>
          <view class="card-cell__group">
            <view class="card-cell__item">
              <view class="card-cell__title">
                项目
              </view>
              <view class="card-cell__content">
                血常规
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                科室
              </view>
              <view class="card-cell__content">
                检验科
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                位置
              </view>
              <view class="card-cell__content">
                2楼检验科1号窗口
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                检查时间
              </view>
              <view class="card-cell__content">
                2025-08-20 14:30
              </view>
            </view>
          </view>
        </view>

        <view class="mt-40 flex-center">
          <view class="confirm-btn w-435">
            <wd-button block @click="handleConfirmSignIn">
              确认签到
            </wd-button>
          </view>
        </view>
      </view>
    </view>

    <view v-else class="app-popup">
      <view class="app-popup__hd">
        <view class="app-popup__cover m-auto flex-center">
          <image :src="buildAssetSource('dui.png')" class="h-96 w-117" />
        </view>
        <view class="app-popup__title mt-20 text-center">
          签到成功
        </view>
        <view class="app-popup__desc text-center">
          您已成功完成常规血液透析的签到，请前往
        </view>
        <view class="app-popup__close" @click="handleClose">
          <image :src="buildAssetSource('login-close.png')" class="h-54 w-54" />
        </view>
      </view>
      <view class="app-popup__content">
        <!-- 就诊等待时间 -->
        <view class="await-block pb-50 pt-44">
          <view class="await-block__title">
            您的签到序号:
          </view>
          <view class="await-block__time mb-20 mt-28">
            H00765
          </view>
          <view class="await-block__count">
            前方等待人数： 6人
          </view>
          <view class="await-block__desc mt-12">
            预计等待时间：约15分钟
          </view>
        </view>
        <!-- 就诊地点 -->
        <view class="location-block mt-20 pb-57 pt-39">
          <view class="location-block__title">
            就诊地点
          </view>
          <view class="location-block__address mt-26">
            门诊楼3楼 内科诊区 302诊室
          </view>
        </view>

        <view class="footer-tips mt-20 px-42 py-32">
          <view class="tips-title">
            <wd-icon name="tips" size="36px" /> 温馨提示
          </view>
          <view class="tips-content">
            <view class="tips-content__item">
              请按预约时间前来治疗，请携带有效身份证件
            </view>
            <view class="tips-content__item">
              治疗前请遵医嘱做好相关准备
            </view>
            <view class="tips-content__item">
              治疗前请测量体重并记录
            </view>
          </view>
        </view>

        <view class="mt-76 flex-center">
          <view class="action-btn w-371">
            <wd-button block>
              继续签到
            </wd-button>
          </view>
          <view class="action-btn ml-30 w-371">
            <wd-button block>
              打印凭条
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.popup-overlay {
  @apply flex-center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.app-popup {
  width: 886px;
  background: #fff;
  padding-bottom: 50px;
  border-radius: 20px;

  .app-popup__hd {
    position: relative;
    padding-left: 46px;
    padding-top: 56px;

    .app-popup__title {
      font-size: 54px;
      font-weight: bold;

      color: #333333;
    }
    .app-popup__desc {
      font-size: 24.25px;
      color: var(--secondary-text-color);
      margin-top: 20px;
    }
    .app-popup__close {
      position: absolute;
      top: 45px;
      right: 64px;
    }
  }

  .app-popup__content {
    padding: 0 50px;
    margin-top: 50px;
  }

  .app-popup__cover {
    background: #e5efff;
    width: 202px;
    height: 202px;
    border-radius: 50%;
  }

  .content-card {
    background: #edf4ff;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 24px 44px 44px;

    .content-card__title {
      font-size: 42px;
      font-weight: bold;

      color: var(--text-color);
    }

    .card-cell__group {
      display: grid;
      grid-template-columns: 2fr 3fr;
    }

    .card-cell__item {
      @apply flex;
      margin-top: 24px;
      .card-cell__title {
        font-size: 28px;
        color: #686869;
        position: relative;
        padding-right: 16px;
        &:after {
          position: absolute;
          content: ':';
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .card-cell__content {
        color: var(--text-color);
        font-size: 30px;
        margin-left: 12px;
      }
    }
  }

  .confirm-btn {
    --wot-button-medium-height: 89px;
    --wot-button-medium-fs: 36px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }

  .action-btn {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }

  .await-block {
    background: #edf4ff;
    border-radius: 20px;
    .await-block__title {
      color: #686869;
      font-size: 30px;
      text-align: center;
    }
    .iconfont {
      font-size: 26px;
    }

    .await-block__time {
      color: var(--primary);
      font-size: 62px;
      font-weight: bold;

      text-align: center;
    }
    .await-block__count {
      font-size: 30px;
      color: var(--secondary-text-color);
      text-align: center;
    }

    .await-block__desc {
      color: var(--text-color);
      font-size: 32px;
      text-align: center;
    }
  }

  .location-block {
    background: #edf4ff;
    border-radius: 20px;

    .location-block__title {
      color: #686869;
      font-size: 30px;
      text-align: center;
    }

    .location-block__address {
      text-align: center;
      font-size: 34px;
      font-weight: 500;
      color: var(--text-color);
      font-weight: 500;
    }
  }

  .footer-tips {
    background: #edf4ff;
    border-radius: 20px;

    .tips-title {
      color: var(--text-color);
      font-size: 32px;
      font-weight: bold;
    }

    .tips-content {
      font-size: 30px;
      color: #3d3d3d;
      .tips-content__item {
        margin-top: 20px;
        padding-left: 32px;
        position: relative;
        &:before {
          position: absolute;
          content: '·';
          left: 0;
          font-size: 48px;
          line-height: 48px;
        }
      }
    }
  }
}
</style>
